<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text=" '我的班级 - ' + ${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
    <div data-th-replace="layout/common-hade-two"></div>
</head>
<body>
    <div data-th-replace="layout/classes/common-layout-classes"></div>
    <div class="mt20 pb10">
        <div class="mb20 pt10 pb10">
            <div class="container">
                <div class="row">
                    <div class="col-sm-9">
                        <section class="c-info-tab">
                            <h4 class="active"><span class="fs16 c-333" >全部班级（<span id="count"></span>）</span></h4>
                        </section>

                        <div class="mt20 pt10">
                            <div th:if="${notJoinClass}" class="alert alert-warning unRadius ml20 mr20 hide">
                                <button id="buy_course_tips_switch" aria-hidden="true" data-dismiss="alert" class="close" type="button" title="关闭">×</button>
                                <i class="fa fa-exclamation-circle mr5"></i>你已经购买了课程，现在可加入课程对应的班级啦
                                <section class="pt10 ml20">提示：1、每个课程只能加入一个班级；2、加入后不可退出，请慎重选择。</section>
                            </div>

                            <div class="row class-list__wrap" id="class-personal-list">
                                <div class="text-center pt10 pb10" id="loading-box">
                                    <span class="loading"></span>
                                </div>
                            </div>
                            <div id="classes-page-btn" class="pt10 mt20 pb10 text-center class-slide-more__wrap hide">
                                <button type="button" class="btn btn-block btn-default">加载更多</button>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="mb20 pt10">
                            <section class="c-head-title">
                                <h6 class="clearfix">
                                    <aside class="pull-right mt5"><a th:href="@{/web/uc/course/user/index}" class="fs12 c-888">进入学习中心</a></aside>
                                    <span class="fs16 c-333">个人信息</span>
                                </h6>
                                <hr>
                            </section>

                            <section class="pt10">
                                <section class="media">
                                    <section class="media-left">
                                        <img class="img-circle lazy vam" th:attr="data-original=${cusUser['avatar']}" width="48" height="48">
                                    </section>
                                    <section class="media-body">
                                        <div class="">
                                            <div class="mb10"><b class="fs3 fs16" th:text="${cusUser['nickname']}"></b></div>
                                            <div class="row">
                                                <section class="col-sm-4 br-line">
                                                    <div class="">
                                                        <section class="hLh20 txtOf" data-toggle="tooltip" data-placement="top" th:attr="data-original-title='我的班级：'+${statistics['classesCount']}">
                                                            <span class="fs16 c-333" th:text="${statistics['classesCount']}"></span>
                                                        </section>
                                                        <section><span class="c-999 fs12">班级</span></section>
                                                    </div>
                                                </section>
                                                <section class="col-sm-4 br-line">
                                                    <div class="">
                                                        <section class="hLh20 txtOf" data-toggle="tooltip" data-placement="top" th:attr="data-original-title='我的动态：'+${statistics['publishCount']}">
                                                            <span class="fs16 c-333" th:text="${statistics['publishCount']}"></span>
                                                        </section>
                                                        <section><span class="c-999 fs12">动态</span></section>
                                                    </div>
                                                </section>
                                                <section class="col-sm-4">
                                                    <div class="">
                                                        <section class="hLh20 txtOf" data-toggle="tooltip" data-placement="top" th:attr="data-original-title='参与'+${statistics['replyCount']}">
                                                            <span class="fs16 c-333" th:text="${statistics['replyCount']}"></span>
                                                        </section>
                                                        <section><span class="c-999 fs12">参与</span></section>
                                                    </div>
                                                </section>
                                            </div>
                                        </div>
                                    </section>
                                </section>
                            </section>

                            <section class="mt20 pt10">
                                <section class="c-head-title">
                                    <h6><span class="fs16 c-333">班级话题分类</span></h6>
                                    <hr>
                                </section>
                                <div class="question-tags-list mt20">
                                    <span th:each="classif : ${topicTypeNum}" class="question-tag">
                                        <button class="btn btn-default btn-rounded btn-outline" type="button">
                                            <span th:text="${classif.name}">话题类型</span>
                                            <small class="ml5 c-666" th:text="${classif.num}">0</small>
                                        </button>
                                    </span>
                                </div>
                            </section>

                            <section class="mt20 pt10">
                                <section class="c-head-title">
                                    <h6><span class="fs16 c-333">APP下载</span></h6>
                                    <hr>
                                </section>
                                <div class="mt10">
                                    <section class="media">
                                        <section class="media-left">
                                            <img th:src="${appDowMap['url']}" width="92" height="92" alt="app扫码下载">
                                        </section>
                                        <section class="media-body">
                                            <h6><b class="fs3" th:text="${infoMap['author']}"><i class="fa fa-angle-right"></i></b></h6>
                                            <span class="fs12 c-ccc" th:text="${#strings.abbreviate(infoMap['description'],43)}" th:title="${infoMap['description']}"></span>
                                        </section>
                                    </section>
                                </div>
                            </section>
                            <section class="mt20 pt10">
                                <section class="c-head-title">
                                    <h6><span class="fs16 c-333">H5&微信</span></h6>
                                    <hr>
                                </section>
                                <div class="mt10">
                                    <section class="media">
                                        <section class="media-left">
                                            <img th:src="${h5MobileMap['url']}" width="92" height="92" alt="H5&微信">
                                        </section>
                                        <section class="media-body">
                                            <h6><b class="fs3" th:text="${infoMap['author']}"><i class="fa fa-angle-right"></i></b></h6>
                                            <span class="fs12 c-ccc" th:text="${#strings.abbreviate(infoMap['description'],43)}" th:title="${infoMap['description']}"></span>
                                        </section>
                                    </section>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/web/business/classes/classes.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/classes/personal/personal-classes.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>